<template>
  <div>
    <el-table
        ref="multipleTable"
        :data="this.tableData"
        height="400px"
        max-height="400px"
        size="small"
        row-class-name="row"
        cell-class-name="column"
        :highlight-current-row="true"
        @selection-change="handleSelectionChange"
        fit
    >
      <el-table-column
          fixed
          type="selection"
          width="55">
      </el-table-column>
      <el-table-column v-for="(item, index) in tableHeadData"
                       :key="index"
                       :prop="item.prop"
                       :width="item.width"
                       :label="item.label">
      </el-table-column>
      <el-table-column
          fixed="right"
          label="操作"
          width="100">
        <template slot-scope="scope">
          <el-button @click="edit(scope.row),dialogEditVisible = true" type="text" size="small">编辑</el-button>
          <el-button @click="del(scope.row.id)" type="text" size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div style="margin-top: 20px">
      <el-button @click="toggleSelection()" style="float: left">取消选择</el-button>
      <el-button @click="deleteSelection()" style="float: left" type="danger">删除选择</el-button>
      <PaginationOne style="float:right;"></PaginationOne>
    </div>
  </div>
</template>

<script>
import PaginationOne from "@/components/PaginationOne";
export default {
  data(){
    return{
      dialogEditVisible:false,
      dialogDelVisible:false,
      multipleSelection:[],
      dataStandardL:this.dataStandard,
      deleteID:"",
    }
  },
  name: "TableOne",
  components: {PaginationOne},
  props: {
    tableData: { // 父组件传递过来的表格数据
      type: Array,
      default: () => {return []}
    },
    tableHeadData: { // 父组件传递过来的表头数据
      type: Array,
      default: () => {
        return []
      }
    },
    dataStandard: {
      default: () => {
        return []
      }
    }
  },
  methods: {
    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    deleteSelection(){

    },
    del(rowId){
      this.deleteID = rowId
      this.$emit("update",this.dataStandardL)
    },
    edit(row){
      this.dataStandardL = row
      this.$emit("update",this.dataStandardL)
      this.dataStandardL={brand_right:0}
    }
  }
}
</script>

<style scoped>

</style>